<template>
  <el-container class="home-container">
    <div id="postsent">
      <!-- <div class="header">
        <ul>
           <li><a href="#">互动交流</a></li> 
          <li><a href="#">文化活动</a></li>
          <li><a href="#">科研支持</a></li>
          <li><a href="#">读者服务</a></li>
          <li><a href="#">文献资源</a></li>
          <li><a href="#">图书馆概况</a></li>
          <li><a href="#">首页</a></li>
        </ul>
      </div>
      <div class="write_pad">
        <div id="content"></div>
        <p>
          <el-row>
            <el-button type="primary" size="small"  @click="submit()">发送</el-button>
          </el-row>
        </p>
      </div> -->
      <div class="plate_show">
        <div class="navi"></div>
        <div class="backgroup">
          <img style="width: 100%" src="../assets/lbutton.jpg" alt="" />
        </div>
      </div>
      <center>
        <div style="margin: 20px 0 ;width :95%" align="right">
          <el-button type="primary" style="margin-bottom:1%" @click="this.$router.push('/forum')">返回论坛</el-button>
          <el-input type="textarea" autosize placeholder="请输入书籍名称" v-model="textarea1" style="margin-bottom:1%">
          </el-input>

          <el-input type="textarea" :autosize="{ minRows: 10 }" placeholder="请输入内容" v-model="textarea2">
          </el-input>
        </div>
        <el-button type="primary" @click="submit()">发送留言</el-button>
      </center>
    </div>
  </el-container>
</template>
<!--<script>
    new Vue({
      el: "#postsent",
      mounted() {
        var ue = UE.getEditor("content", {
          initialFrameWidth: "100%",
        });
      },
    });
  </script>-->
<script>
import axios from "axios";
export default {
  data() {
    return {
      userid: window.sessionStorage.getItem("userid"),
      textarea1: "", //书籍名称
      textarea2: "", //发帖内容
    };
  },
  /* mounted() {
    //建立页面将当前用户ID传入到后端
    axios({
      method: "post",
      data: this.userid,
      url: "http://localhost:8080/",
    }).then(
      (res) => {
        console.log("ok", res);
        this.$data.ReserveData = res.data.MyReserveList;
      },
      (error) => {
        console.log("错误", error.message);
      }
    );
  }, */
  methods: {
    getTime() {
      var time = new Date();
      return time.toLocaleString(); //获取日期与时间
    },
    submit() {
      axios({
        method: "post",
        params: {
          userid: this.userid,
          content: this.textarea2,
          topic: this.textarea1,
          time: this.getTime(),
        },
        url: "/api/Forum/enterForum",
      }).then(
        (res) => {
          console.log("submit", res);
          if (res.data == true) {
            this.$message({
              message: "发送成功",
              type: "success",
            });
          } else if (res.data == false) {
            this.$message.error("发送失败");
          }
        },
        (error) => {
          console.log("错误", error.message);
        }
      );
      this.$router.push('/forum');
    },
  },
};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.home-container {
  background-color: #f4f4f4;
  height: 100%;
}

.header ul {
  list-style-type: none;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: rgb(18, 18, 101);
}

.header ul li {
  float: right;
  border-right: 1px solid #bbb;
}

.header ul li:first-child {
  border-right: none;
}

.header ul li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/*鼠标移动到选项上修改背景颜色 */
.header ul li a:hover {
  background-color: #111;
}

.plate_show {
  width: 95%;
  margin: 20px auto;
}

.plate_show .backgroup {
  margin: auto;
}

.write_pad {
  padding-top: 66px;
  width: 90%;
  margin: auto;
}

.write_pad #content {
  height: 500px;
}

.write_pad p {
  margin-top: 140px;
  margin-bottom: 36px;
}

a {
  text-decoration: none;
  color: #fff;
}
</style>
